<!--
 * @Description: App
 * @Author: rendc
 * @Date: 2023-12-03 09:33:13
 * @LastEditors: rendc
 * @LastEditTime: 2023-12-08 17:21:01
-->
<template>
  <!-- 底部导航栏 -->
  <!-- {{ active }} -->
  <!-- <van-button @click="toPage(1)">1</van-button>
  <van-button @click="toPage(2)">2</van-button>
  <van-button @click="toPage(3)">3</van-button>
  <van-button @click="toPage(4)">4</van-button> -->
  <!-- 当active==0的时候，展示首页 -->
  <Index v-if="active==0"/>
  <Community v-if="active==1"/>
  <Message v-if="active==2"/>
  <My v-if="active==3"/>
  <van-tabbar v-if="!active == 1" v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">社区</van-tabbar-item>
    <van-tabbar-item icon="friends-o">消息</van-tabbar-item>
    <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
//  @ = src
import Index from "@/views/IndexView.vue"
import Community from "@/views/CommunityView.vue"
import Message from "@/views/MessageView.vue"
import My from "@/views/MyView.vue"

const active = ref(0);

const toPage =(num) => {
  console.log('🤡 CC - toPage - num:', num);
  active.value = num - 1;
}
</script>

<style lang="less">
</style>